<!-- user -->
<template>
  <div>
    <div class="sub-banner">
      <div class="width1200"><img src="../../assets/images/pricing-txt.png"></div>
    </div>
    <div class="sub-con-bg" style="padding: 100px 0;">
      <div class="pricing-con">
        <div class="sub-tit">Flexible Plans Tailored to<span class="blue"> Your Scale</span></div>
        <div class="pricing">
          <ul>
            <li class="border-blue">
              <div class="tit">Basic</div>
              <div class="btn" style="background: #064EB1;">For Small-Scale Miners</div>
              <div class="price" style="line-height: 60px">Free Charge</div>
              <div class="item">
                <ul class="free">
                  <li>From 1 to 999 AISCs</li>
                  <li>Remote ASIC Management</li>
                  <li>Profitability Reporting</li>
                  <li class="unChoose">Basic Alerting</li>
                  <li class="unChoose">Advanced Alerting & Triggers</li>
                  <li class="unChoose">Scheduled Task</li>
                  <li class="unChoose">Customizable Dashboard</li>
                  <li class="unChoose">Email Reporting</li>
                  <li class="unChoose">Interactive Site Management</li>
                  <li class="unChoose">Alerts Reporting</li>
                  <li class="unChoose">User Management</li>
                  <li class="unChoose">Permission System</li>
                  <li class="unChoose">Tiered Pricing Discounts</li>
                  <li class="unChoose">Committed Use Savings</li>
                  <li class="unChoose">Power Control</li>
                  <li class="unChoose">Cost Avoidance</li>
                  <li class="unChoose">Automated Demand Response</li>
                  <li class="unChoose">Historical Data Access</li>
                  <li class="unChoose">Premium Support</li>
                  <li class="unChoose">Compliance Support</li>
                </ul>
              </div>
            </li>
            <li class="border-yellow">
              <div class="tit">Professional</div>
              <div class="btn" style="background: #f7ce02; color: black">For Small to Mid-Scale Miners</div>
              <div class="price">$0.50<br/>  Per ASIC Per Month</div>
              <div class="item">
                <ul class="pre">
                  <li>From 1 to 999 AISCs</li>
                  <li>Remote ASIC Management</li>
                  <li>Profitability Reporting</li>
                  <li>Basic Alerting</li>
                  <li>Advanced Alerting & Triggers</li>
                  <li>Scheduled Task</li>
                  <li>Customizable Dashboard</li>
                  <li>Email Reporting</li>
                  <li>Interactive Site Management</li>
                  <li>Alerts Reporting</li>
                  <li class="unChoose">User Management</li>
                  <li class="unChoose">Permission System</li>
                  <li class="unChoose">Tiered Pricing Discounts</li>
                  <li class="unChoose">Committed Use Savings</li>
                  <li class="unChoose">Power Control</li>
                  <li class="unChoose">Cost Avoidance</li>
                  <li class="unChoose">Automated Demand Response</li>
                  <li class="unChoose">Historical Data Access</li>
                  <li class="unChoose">Premium Support</li>
                  <li class="unChoose">Compliance Support</li>
                </ul>
              </div>
            </li>
            <li class="border-red">
              <div class="tit">Enterprise</div>
              <div class="btn" style="background: #f37c6a;">For Large-Scale and Enterprise Miners</div>
              <div class="price" style="line-height: 60px">Custom Pricing</div>
              <div class="item">
                <ul class="custom">
                  <li>From 1 to 999 AISCs</li>
                  <li>Remote ASIC Management</li>
                  <li>Profitability Reporting</li>
                  <li>Basic Alerting</li>
                  <li>Advanced Alerting & Triggers</li>
                  <li>Scheduled Task</li>
                  <li>Customizable Dashboard</li>
                  <li>Email Reporting</li>
                  <li>Interactive Site Management</li>
                  <li>Alerts Reporting</li>
                  <li>User Management</li>
                  <li>Permission System</li>
                  <li>Tiered Pricing Discounts</li>
                  <li>Committed Use Savings</li>
                  <li>Power Control</li>
                  <li>Cost Avoidance</li>
                  <li>Automated Demand Response</li>
                  <li>Historical Data Access</li>
                  <li>Premium Support</li>
                  <li>Compliance Support</li>
                </ul>
              </div>
            </li>
          </ul>
        </div>

        <div class="sub-tit" style="margin: 80px 0 30px">Looking for customization or <span class="blue">other expansion?</span></div>

          <a class="freeBtn pointer" style="margin: 0 auto">
            <span><router-link to="/contact" style="color: white">Contact Us</router-link></span>
            <img class="right-arrow-icon" src="../../assets/images/right-arrow.png">
          </a>

      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {},
    data() {
      return {

      }
    },

    methods: {

    },
  }
</script>

<style lang="scss" scoped>
.pricing-con{
  width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 0 100px;
  .sub-tit{
    font-size: 28px;
    color: #000000;
    font-weight: bold;
    text-align: center;
  }
  .pricing{
    padding: 50px 0 0;
    > ul{
      display: flex;
      justify-content: space-between;
      .border-blue{
        border-top: 9px solid #064eb1;
      }
      .border-yellow{
        border-top: 9px solid #f7ce02;
      }
      .border-red{
        border-top: 9px solid #f37c6a;
      }
      > li{
        width: 394px;
        background: #FFFFFF;
        box-shadow: 0 2px 9px 1px rgba(0,0,0,0.13);
        padding: 40px 0;
        .tit{
          font-size: 16px;
          color: #000000;
          line-height: 35px;
          font-weight: 600;
          padding: 18px 0;
          text-align: center;
        }
        .btn{
          width: 318px;
          height: 38px;
          line-height: 38px;
          border-radius: 19px;
          margin: 0 auto;
          text-align: center;
          color: white;
        }
        .price{
          min-height: 60px;
          font-weight: 600;
          font-size: 28px;
          color: #000000;
          text-align: center;
          line-height: 33px;
          padding: 54px 0;
        }
        .item{
          ul.free{
            li::before{
              background: url("../../assets/images/blue.png") no-repeat;
            }
          }
          ul.pre{
            li::before{
              background: url("../../assets/images/yellow.png") no-repeat;
            }
          }
          ul.custom{
            li::before{
              background: url("../../assets/images/red.png") no-repeat;
            }
          }
          ul{
            padding: 0 10px 0 65px;
            li::before{
              content: '';
              width: 16px;
              height: 16px;
              position: absolute;
              left: 0;
              top: 10px;
            }
            li{
              position: relative;
              padding-left: 36px;
              font-size: 14px;
              color: #000000;
              line-height: 35px;
              font-weight: bold;
            }
            li.unChoose::before{
               background: url("../../assets/images/unChoose.png") no-repeat;
            }
            li.unChoose{
              color: #8E9FB3;
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}
</style>
